/*
 * 1. 鼠标进入和离开SMALL-BOX，控制MARK以及BIG-BOX的显示隐藏
 * 2. 控制MARK在SMALL-BOX中运动，但是不能超过边界 
 * 3. 当MARK在SMALL-BOX移动的时候，根据MARK移动的距离，计算出BIG-IMG在BIG-BOX中移动的距离（反向三倍：X/Y轴移动都是三倍，整体九倍）
 */
$(function () {
    let magnifier = (function () {

        return {
            init: function () {

                // 一上来找元素 反复用到的变量提前定义 ，因为找元素也耗费性能。
                let $smallBox = $('.smallBox'),
                    $mark = $('.mark'),
                    $bigBox = $('.bigBox'),
                    $bigImg = $bigBox.children('img')
                $bigImg.width(1000)
                $bigImg.height(1000)

                $smallBox.on('mouseenter', function () {
                    $mark.show()
                    $bigBox.show()
                }).on('mouseleave', function () {
                    $mark.hide()
                    $bigBox.hide()
                }).on('mousemove', function (e) {
                    // offset()相对于整个body的偏移量 
                    // x.y是mark相对于smallabox偏移量
                    let x = e.pageX - $(this).offset().left - $mark.width() / 2
                    let y = e.pageY - $(this).offset().top - $mark.height() / 2
                    let minL = minT = 0,
                        maxL = $smallBox.width() - $mark.width(),
                        maxT = $smallBox.height() - $mark.height()
                    // 三木运算符（双重运用） 边界判断
                    x = x <= minL ? minL : (x >= maxL ? maxT : x)
                    y = y <= minT ? minT : (y >= maxT ? maxT : y)
                    // 设置left top用css
                    $mark.css({ left: x, top: y })

                    // mark运动 右边大图反向移动 横竖都是3被
                    $bigImg.css({
                        top: -y * 3,
                        left: -x * 3
                    })

                })

            }
        }
    })()
    magnifier.init()
})